import React, { useState, useEffect } from 'react'
import { getUrl } from "../../utils/request"
import { Table, Tag, Space, Button, message } from 'antd';
import { deleteHero } from "../../network/admin/hero"
import store from "../../store/index"

function HeroMange(props: any) {
    const [heroList, setHeroList] = useState([])
    useEffect(() => {
        getUrl("/rest/heros").then((res: any) => {
            console.log(res.data)
            setHeroList(res.data)
        })
    }, [])
    const { Column, ColumnGroup } = Table;

    //删除英雄
    const _delete = () => {

    }
    let num = 1
    return (
        <div>
            <Button type="primary" onClick={() => {
                props.history.push("/home/creatList")
                store.dispatch({ type: 'SET_FLAG' })
            }}>+添加装备</Button>
            <Table dataSource={heroList}>
                <Column title="序号" dataIndex={num + 1} key="_id" />
                <Column title="英雄名称" dataIndex="name" key="_id" />
                <Column title="英雄称号" dataIndex="title" key="_id" />
                <Column title="所属分类" dataIndex="cate" key="_id" />
                <Column title="头像" render={(text, record: any) => (
                    <Space size="middle">
                        <img src={record.avatar} alt="" style={{ width: "50px", height: "50px" }} />
                    </Space>
                )} key="_id" />

                <Column
                    title="操作"
                    key="action"
                    render={(text, record) => (
                        <Space size="middle">
                            <a>编辑</a>
                            <a onClick={() => {
                                deleteHero(`${text._id}`).then(res => {
                                    message.success('删除成功')
                                })
                            }}>删除</a>
                        </Space>
                    )}
                />
            </Table>
        </div>
    )
}

export default HeroMange
